<template>
  <el-card class="container">
    <el-calendar :key="calendarKey" class="calendar" v-model="currentDate">
      <!-- 命名插槽 -->
      <template #date-cell="{ data }">
        <p
          :class="[
            data.isSelected ? 'is-selected' : '',
            calendarItemBgClass(data.day)
          ]"
        >
          <!-- 显示的内容 -->
          {{ data.day.split('-').slice(2).join('') }}
          <br />
          <!-- 当日金额 -->
          <span class="amount" v-if="gettodayAmount(data.day)">
            {{ gettodayAmount(data.day) }}
          </span>
        </p>
      </template>
    </el-calendar>
  </el-card>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted, inject } from 'vue'
import { getChartCalendar } from '@/api/chart'
import emitter from '@/utils/eventHub'

// 选中的日期
const currentDate = ref(new Date())

/**
 * 触发日期改变的事件
 */
watch(currentDate, val => {
  emitter.emit('calendarChange', val)
})

/**
 * 获取数据
 */
const calendarListData = ref([])
const getCalendarListData = async () => {
  const { result } = await getChartCalendar()
  calendarListData.value = result
}
getCalendarListData()

// 收益缓存数据
// key 为日期
// val 为对应的 金额
const dateAmountList = ref({})

/**
 * 返回指定日期收益数据，在日历中进行展示
 */
const gettodayAmount = (date) => {
  // 读取缓存数据
  if (dateAmountList.value[date]) {
    // return dateAmountList.value[date]
  }

  // 根据日期，获取当日数据
  const tadayData = calendarListData.value.find((item) => item.date === date)
  // 判断当日数据是否存在
  if (!tadayData) {
    return 0
  }

  // 获取当日收益
  const todayAmount = tadayData.amount

  // 对数据进行缓存
  dateAmountList.value[date] = todayAmount

  return todayAmount
}

/**
 * 返回日历的背景类
 * */
const calendarItemBgClass = (day) => {
  if (gettodayAmount(day) > 0) {
    return 'profit'
  } else if (gettodayAmount(day) < 0) {
    return 'loss'
  }
  return ''
}

// 监听ws消息
const socket = inject('websocket')
const calendarKey = ref(0)
const unwatch = socket.on('message:calendar', (msg) => {
  calendarListData.value = msg.data.result
  calendarKey.value = calendarKey.value === 0 ? 1 : 0
})

onMounted(() => {
  setInterval(() => {
    socket.send({ type: 'calendar', payload: '' })
  }, 2000)
})

onUnmounted(() => {
  if (unwatch) {
    unwatch()
  }
})
</script>

<style lang="scss" scoped>
.container {
  height: 443px;
  .calendar {
    :deep(.el-calendar__body) {
      padding: 0 12px 12px;
      font-size: 14px;
    }
    :deep(.el-calendar-day) {
      height: 66px !important;
      padding: 0 !important;
      p {
        height: 100%;
        padding: 8px;
      }
      // 金额样式
      .amount {
        font-size: 12px;
      }
      // 正收益
      .profit {
        background-color: #f3fff3;
        span {
          color: #649840;
        }
      }
      // 负收益
      .loss {
        background-color: #ff3737;
        span {
          color: #b67d59;
        }
      }
      .is-selected {
        background-color: #d6f2ff;
      }
    }
  }
}
</style>
